import { computed, nextTick, reactive, Ref, set } from 'vue'
import config from '@/config'
import { WidgetType } from '@/types'
import { Widget, CheckOption } from '@/models'
import { scrollIntoView } from '@/utils'

/** 单、复选框 */
export default function useCheckGroup(data: Ref<Widget>) {
  /** 是否单选 */
  const isRadio = computed(() => data.value.type === WidgetType.RADIO_GROUP)

  /** 是否只读 */
  const isReadonly = computed(() => !data.value.isUse)

  /** 选项配置 */
  const optionConfig = config.checkOption

  /** 选项列表 */
  const options = computed(() => data.value.checkOptions)

  /** 激活的索引 */
  const activeIndex = computed({
    set(index: number) {
      set(data.value.extra, 'activeIndex', index)
    },

    get() {
      return (data.value.extra.activeIndex as number) ?? -1
    }
  })

  /** 范围 */
  const range = computed(() => {
    const list = options.value
    const xItems = list.map(item => item.x)
    const yItems = list.map(item => item.y)
    const minX = Math.min(...xItems)
    const maxX = Math.max(...xItems)
    const minY = Math.min(...yItems)
    const maxY = Math.max(...yItems)

    return {
      minX,
      maxX,
      minY,
      maxY
    }
  })

  /** 盒子 */
  const box = computed(() => {
    const { space, width, height } = optionConfig
    const { minX, maxX, minY, maxY } = range.value

    return {
      x: minX - space,
      y: minY - space,
      w: maxX - minX + width + space * 2,
      h: maxY - minY + height + space * 2
    }
  })

  /** 新增按钮 */
  const addButton = reactive({
    /** 是否可见 */
    visible: computed(() => data.value.isSet),
    /** 禁用提示 */
    disabledTips: computed(() => {
      const { max } = optionConfig
      return options.value.length < max ? '' : `最多添加${max}个选项`
    })
  })

  return reactive({
    /** 选项列表 */
    options,

    /** 激活的索引 */
    activeIndex,

    /** 范围 */
    range,

    /** 盒子尺寸 */
    box,

    /** 是否单选 */
    isRadio,

    /** 是否只读 */
    isReadonly,

    /** 新增按钮 */
    addButton,

    /** 最大长度 */
    maxLength: optionConfig.maxLength,

    /** 新增选项 */
    async add(label?: string) {
      if (addButton.disabledTips) return

      const list = options.value
      const { minX, maxY } = range.value
      const { height, space } = optionConfig

      list.push(
        new CheckOption({
          label: label || `选项${list.length + 1}`,
          x: minX,
          y: maxY + height + space * 2 - 1
        })
      )

      await nextTick()

      // 滚动到最后一个
      scrollIntoView('.fa-widget-setting .group-option:last-child')
    },

    /** 是否删除选项 */
    removable: computed(() => data.value.isSet && options.value.length > 1),

    /** 移除选项 */
    remove(index: number) {
      options.value.splice(index, 1)
    },

    /** 选择选项 */
    select(item: CheckOption) {
      if (isRadio.value) {
        // 单选取消其他选项
        if (item.value) {
          options.value.forEach(option => {
            if (option.value && option !== item) {
              option.value = false
            }
          })
        }

        // 必填单选不让取消
        if (data.value.required && !item.value) {
          item.value = true
        }
      }
    }
  })
}
